<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    /* p:first-line{
        color:red;
    } */
    span {
        display: inline-block;
    }

    span::first-line {
        color: red;
    }

    span::first-letter{
        font-size: 4em;
        padding-left: 20px;
    }
    span::before{
        content: "开头";
    }
    span::after{
        content: "结束";
    }

    h1:hover{
        color: blue;
    }

    /* :foucs 得有输入状态  input */
</style>

<body>
    <h1>伪元素</h1>
    <ul>
        <li> <strong>:first-line 伪元素 - > "first-line" 伪元素用于向文本的首行设置特殊样式。</strong></li>
        <li> <strong>注意："first-line" 伪元素只能用于块级元素。</strong></li>
        <li> <strong>如果出现了内联想用伪元素的情况，我们要先把内联转换成为块元素</strong></li>
    </ul>


    <hr>
    <span>
        近日，山东烟台95后姑娘媛媛做的花饽饽大馒头被网友夸上了热搜，她的大馒头可不一般，是山东省省级非物质文化遗产，那些花样繁多、栩栩如生的聚宝盆、福袋、醒狮兔造型的花饽饽，精致得让人舍不得吃。

        媛媛大学时的专业是“高大上”的金融专业，那她为何毕业后选择做馒头呢？12月6日，扬子晚报紫牛新闻记者联系上媛媛，听她讲述了自己创业的故事。 紫牛新闻见习记者 徐韶达 记者 陈勇 受访者供图
    </span>


</body>

</html>